<template>
    <div class="member-container">
        <div class='card'>
            <h3 class='card-title'>好好学习</h3>
            <p class='card-date'>2019-4-2</p>
            <img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552647264216&di=8fcfa95eabe6ed7341985b16460aa09f&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201506%2F29%2F20150629165036_zc4vn.jpeg'
                  class='card-img'>
            <p class='card-desc'>越学习，越成功</p>
            <p class='card-read arrow'>查看详情</p>
        </div>
        <div class='card'>
            <h3 class='card-title'>天天向上</h3>
            <p class='card-date'>2019-4-2</p>
            <img src='http://www.kokojia.com/Public/images/upload/article/2016-12/5860df01eae7d.jpg'
                 class='card-img'>
            <p class='card-desc'>越成功，越努力</p>
            <p class='card-read arrow'>查看详情</p>
        </div>
        <div class='card'>
            <h3 class='card-title'>随便写写</h3>
            <p class='card-date'>2019-4-2</p>
            <img src='http://img4.imgtn.bdimg.com/it/u=1069689569,3423112149&fm=26&gp=0.jpg'
                 class='card-img'>
            <p class='card-desc'>越努力，越幸运</p>
            <p class='card-read'>查看详情</p>
        </div>
    </div>
</template>

<script>

</script>

<style lang="less" scoped>
    .member-container {
        background-color: #f1f1f1;
        overflow: hidden;
        .card {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 10px;
            margin: 15px 5px;
            padding: 10px;
            display: flex;
            flex-direction: column;
        }

        .card-title {
            font-size: 20px;
            margin-bottom: 15px;
        }

        .card-date {
            font-size: 14px;
            color: #ccc;
            border-bottom: 1px solid #f1f1f1;
            margin-bottom: 20px;
            padding-bottom: 10px;
        }

        .card-img {
            width: 100%;
            height: 300px;
        }

        .card-desc {
            border-bottom: 1px solid #f1f1f1;
            margin: 15px 0;
            padding-bottom: 15px;
        }

        .card-read {
            font-size: 14px;
            color: #aaa;
        }
        .card-read:after {
            content: '>';
            display: inline-block;
            font-size: 16px;
            float: right;
            padding-right: 10px;
        }
    }
</style>